<script setup lang="ts">
import { NButton, NImage, NInput, NModal, useMessage } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import type MarkdownIt from 'markdown-it'
import aiCanvas from './aiCanvas.vue'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { flechTask, localGet, mjImgUrl, mlog, url2base64 } from '@/api'
import { homeStore } from '@/store'
import { t } from '@/locales'

interface Props {
  chat: Chat.Chat
  , mdi: MarkdownIt
}
const props = defineProps<Props>()
const { isMobile } = useBasicLayout()
const ms = useMessage()
const st = ref({ isLoadImg: false, uri_base64: '', bts: [], isShow: false, isCustom: false, customText: '' })

const reload = () => {
  flechTask(chat.value)
}
const sub = (type: string, index: number) => {
  const text = `${chat.value.opt?.promptEn} ${type} ${index}`
  const obj = {
    action: 'change',
    version: 1,
    text,
    data: {
      action: type,
      index,
      taskId: chat.value.mjID,
    },
  }
  homeStore.setMyData({ act: 'draw', actData: obj })
}
// const st= ref({isLoad:false,});
/// /实现本地保存图片
// const saveImg= (myChat:Chat.Chat)=>{
//     //homeStore.setMyData({act:'saveImg',actData:chat.value.opt?.promptEn});
//     if(myChat.opt?.progress=='IMAGINE'){

//     }else{
//         st.value.isLoad=true;
//     }
// }
const chat = computed(() => props.chat)

const subV2 = (b: { k: string;n: string }) => {
  if (chat.value.opt?.buttons == undefined)
    return
  // mlog('subV2', b );
  const i = getIndex(chat.value.opt?.buttons, b)
  mlog('subV2', b, i, chat.value.opt?.buttons[i])
  if (b.k == ':Inpaint::1') {
    mlog('局部重绘！', i)
    st.value.isShow = true
    return
  }
  if (b.k == 'CustomZoom::') {
    mlog('自定义变焦', i)
    st.value.isCustom = true
    return
  }
  const obj = {
    action: 'changeV2',
    version: 1,
    data: {
      customId: chat.value.opt?.buttons[i].customId,
      taskId: chat.value.mjID,
    },
  }
  homeStore.setMyData({ act: 'draw', actData: obj })
}

const subCustom = () => {
  if (chat.value.opt?.buttons == undefined)
    return
  const i = getIndex(chat.value.opt?.buttons, { k: 'CustomZoom::', n: t('mj.czoom') })
  const obj = {
    action: 'CustomZoom',
    version: 1,
    data: {
      customId: chat.value.opt?.buttons[i].customId,
      taskId: chat.value.mjID,
    },
    maskData: {
      prompt: st.value.customText,
    },
  }
  mlog('subCustom', obj)
  homeStore.setMyData({ act: 'draw', actData: obj })

  st.value.isCustom = false
}

const maskOk = (d: any) => {
  if (chat.value.opt?.buttons == undefined)
    return

  mlog('maskOk', d)
  const i = getIndex(chat.value.opt?.buttons, { k: ':Inpaint::1', n: t('mj.redraw') })
  const obj = {
    action: 'mask',
    version: 1,
    data: {
      customId: chat.value.opt?.buttons[i].customId,
      taskId: chat.value.mjID,
    },
    maskData: {
      maskBase64: d.mask,
      prompt: d.prompt,
      // "taskId": "14001934816969359"
    },
  }
  homeStore.setMyData({ act: 'draw', actData: obj })
  // imageSend({t:'V',v: 23,chat:props?.chat,  data:{ mask:d.mask,prompt:d.prompt} })
  st.value.isShow = false
}
// 专业版本按钮
const bt = [
  [
    { k: ':upsample::1', n: 'U1' },
    { k: ':upsample::2', n: 'U2' },
    { k: ':upsample::3', n: 'U3' },
    { k: ':upsample::4', n: 'U4' },
    { k: 'high_variation', n: t('mj.high_variation') },
    { k: 'low_variation', n: t('mj.low_variation') },
    { k: ':Inpaint::1', n: t('mj.redraw') },
    { k: 'Outpaint::50', n: t('mj.p15') },
    { k: 'Outpaint::75', n: t('mj.p20') },
    { k: 'CustomZoom::', n: t('mj.czoom') },
    { k: 'Outpaint::100', n: t('mj.p100') },
    // MJ::CustomZoom

    { k: 'Job::PicReader::1', n: 'T1' },
    { k: 'Job::PicReader::2', n: 'T2' },
    { k: 'Job::PicReader::3', n: 'T3' },
    { k: 'Job::PicReader::4', n: 'T4' },
    { k: 'Picread::Retry', n: t('mj.retry') },

    { k: 'PromptAnalyzer::1', n: 'T1' },
    { k: 'PromptAnalyzer::2', n: 'T2' },
    { k: 'PromptAnalyzer::3', n: 'T3' },
    { k: 'PromptAnalyzer::4', n: 'T4' },
    { k: 'PromptAnalyzer::5', n: 'T5' },

    // PromptAnalyzer::1
    // ,{k:'Job::PicReader::all',n:'全4张'}
  ],
  [
    { k: ':variation::1', n: 'V1' },
    { k: ':variation::2', n: 'V2' },
    { k: ':variation::3', n: 'V3' },
    { k: ':variation::4', n: 'V4' },
    { k: 'pan_left', n: t('mj.pan_left') },
    { k: 'pan_right', n: t('mj.pan_right') },
    { k: 'pan_up', n: t('mj.pan_up') },
    { k: 'pan_down', n: t('mj.pan_down') },
    { k: 'reroll::0', n: t('mjchat.reroll') },
    { k: 'upsample_v5_2x', n: t('mj.up2') },
    { k: 'upsample_v5_4x', n: t('mj.up4') },
  ],
]

const getIndex = (arr: any[], ib: any) => arr.findIndex((v9: any) => v9.customId.includes(ib.k))
const getIndexName = (arr: any[], ib: any) => {
  const i = getIndex(arr, ib)
  if (ib.k == 'upsample_v5_2x')
    return ib.n
  return `${arr[i].emoji} ${ib.n}`
}

const load = async (isFlash = false) => {
  changCustom()
  if (!chat.value.mjID)
    return
  const key = `img:${chat.value.mjID}`
  try {
    if (chat.value.opt?.imageUrl) {
      // await loadImg(chat.value.opt?.imageUrl);
      let base64 = await localGet(key)
      if (!base64 || isFlash) {
        const ubase64 = await url2base64(mjImgUrl(chat.value.opt?.imageUrl), key)
        base64 = ubase64.base64
        mlog('图片已保存>>', ubase64.key)
      }
      st.value.uri_base64 = base64
    }
  }
  catch (error) {
    mlog('图片保存失败', error)
  }

  st.value.isLoadImg = true
}

watch(() => homeStore.myData.act, (n) => {
  const actData: any = homeStore.myData.actData
  if (n == 'mjReload' && actData.mjID == chat.value.mjID) { // && actData.mjID==chat.value.mjID
    mlog('mjReload', actData.mjID, chat.value.mjID, chat.value.opt?.imageUrl)
    if (!st.value.isLoadImg) {
      ms.success(t('mj.fail1'))
      return
    }
    st.value.isLoadImg = false
    load(true)
    if (!actData.noShow)
      ms.success(t('mj.success1'))
  }
})
const text = computed(() => {
  const value = props.chat.opt?.properties?.finalZhPrompt
  return props.mdi.render(value)
})

const changCustom = () => {
  mlog('changCustom', chat.value.opt) // prompt
  st.value.customText = chat.value.opt?.prompt ?? ''

  st.value.customText += '  --zoom 1.8'
}

// const imageUrl= computed( ()=>{
//     if(chat.value.opt?.imageUrl) return chat.value.opt?.imageUrl;
//     return ''
// });

load()
</script>

<template>
  <div v-if="st.isLoadImg">
    <template v-if="chat.opt?.progress">
      <div v-if="chat.opt?.action == 'SHORTEN'" class="markdown-body" v-html="text" />
      <div v-else-if="chat.opt?.action != 'IMAGINE'" class="py-2 text-[#666]  whitespace-pre-wrap">
        {{ chat.opt?.promptEn }} (<span v-html="chat.opt?.action" />)
      </div>
      <NImage v-if="chat.opt.imageUrl" :src="st.uri_base64 ? st.uri_base64 : mjImgUrl(chat.opt.imageUrl)" class=" rounded-sm " :class="[isMobile ? '' : '!max-w-[500px]']" />
      <div v-if="chat.opt?.status == 'SUCCESS' " class=" space-y-2">
        <template v-if="chat.opt?.buttons">
          <div v-for="(bts, ii) in bt" class=" flex justify-start items-center flex-wrap ">
            <template v-for="ib in bts">
              <div v-if=" getIndex(chat.opt?.buttons, ib) > -1" class="p-1">
                <NButton size="small" :type="ii == 1 ? 'warning' : 'primary'" @click="subV2(ib)">
                  {{ getIndexName(chat.opt?.buttons, ib) }}
                </NButton>
              </div>
            </template>
          </div>
        </template>
        <template v-else-if="chat.opt?.action === 'UPSCALE' || 'DESCRIBE' === chat.opt?.action" />
        <template v-else>
          <div class="flex space-x-2">
            <NButton type="primary" size="small" @click="sub('UPSCALE', 1)">
              U1
            </NButton>
            <NButton type="primary" size="small" @click="sub('UPSCALE', 2)">
              U2
            </NButton>
            <NButton type="primary" size="small" @click="sub('UPSCALE', 3)">
              U3
            </NButton>
            <NButton type="primary" size="small" @click="sub('UPSCALE', 4)">
              U4
            </NButton>
          </div>
          <div class="flex space-x-2">
            <NButton type="warning" size="small" @click="sub('VARIATION', 1)">
              V1
            </NButton>
            <NButton type="warning" size="small" @click="sub('VARIATION', 2)">
              V2
            </NButton>
            <NButton type="warning" size="small" @click="sub('VARIATION', 3)">
              V3
            </NButton>
            <NButton type="warning" size="small" @click="sub('VARIATION', 4)">
              V4
            </NButton>
            <NButton v-if="chat.opt?.action === 'IMAGINE'" type="warning" size="small" @click="sub('REROLL', 1)">
              {{ $t('mjchat.reroll') }}
            </NButton>
          </div>
        </template>
      </div>
      <div v-else-if="!chat.loading">
        <NButton type="primary" @click="reload()">
          {{ $t('mjchat.reload') }}
        </NButton>
      </div>
      <div v-else-if="chat.opt.progress" class="py-2 min-w-[200px]">
        {{ $t('mjchat.progress') }}{{ chat.opt.progress }}
      </div>
      <div v-else class="py-2">
        {{ $t('mjchat.wait') }}
      </div>
      <!-- <div v-html="chat.opt?.action"></div> -->
    </template>
    <div v-else-if="chat.opt?.status == 'FAILURE'">
      <div>{{ $t('mjchat.failReason') }}<p>{{ chat.opt?.failReason }}</p></div>
    </div>
    <div v-else>
      {{ $t('mjchat.wait2', { id: chat.mjID }) }}
      <div v-if="!chat.loading">
        <NButton type="primary" @click="reload()">
          {{ $t('mjchat.reload') }}
        </NButton>
      </div>
    </div>
    <div class=" hidden">
      {{ chat.dateTime }}
    </div>

    <NModal v-model:show="st.isShow" preset="card" :title="$t('mjchat.redrawEditing')" style="max-width: 800px;" @close="st.isShow = false">
      <aiCanvas v-if="st.isShow" :chat="chat" :base64="st.uri_base64" @success="maskOk" />
    </NModal>
    <NModal v-model:show="st.isCustom" preset="card" :title="$t('mj.customTitle')" style="max-width: 600px;" @close="st.isCustom = false">
      <NInput
        v-model:value="st.customText" type="textarea" round maxlength="2000" show-count
        :autosize="{ minRows: 3, maxRows: 8 }"
      />
      <div class="pt-2 flex justify-between items-center">
        <div class="text-neutral-500">
          {{ $t('mj.zoominfo') }}
        </div>
        <NButton type="primary" size="small" @click="subCustom">
          {{ $t('mjchat.submit') }}
        </NButton>
      </div>
    </NModal>
  </div>
  <div v-else class="w-[200px] h-[150px] flex flex-col justify-center items-center">
    <div class="p-4">
      {{ $t('mjchat.loading') }}
    </div>

    <NButton v-if="chat.opt?.imageUrl" type="primary">
      <a :href=" mjImgUrl(chat.opt?.imageUrl)" target="_blank">{{ $t('mjchat.openurl') }}</a>
    </NButton>
  </div>
</template>

<style>
.markdown-body img.maxCss,img.maxCss ,.maxCss img  { max-width: 400px!important; max-height: 400px!important;}
.mmWidth{ max-width: 600px;}
html.dark .markdown-body pre code { color:#abb2bf; }
</style>
